<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>

  </style>
  <script src="jquery.min.js"></script>
</head>

<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <script>
    $(function () {
      $("div").css("color", "red")
      //如果针对于同一元素做不同操作 需要用到遍历元素 （类似for 但是比for强大）
      // 1. each() 方法遍历元素
      $("div").each(function (index, domEle) {
        // 回调函数第一个参数一定是索引号 可以自己指定索引号名称
        let sum = 0
        let arr = ["red", "blue", "green"]
        console.log(index)
        // 第二个参数 一定是 DOM元素对象
        console.log(domEle)
        // domEle.css("color") // 注意因为这是一个DOM对象 DOM对象是没有css方法的
        // 将DOM对象转换成jQuery对象
        $(domEle).css("color", "blue")

        $(domEle).css("color", arr[index])

        sum += parseInt($(domEle).text())
        console.log(sum)

        // each很好的遍历数组
        // 2. $.each() 方法遍历元素 主要用于遍历数据 处理数据
        $.each($("div"), function (i, ele) {
          console.log(i)
          console.log(ele)
        })
        $.each(arr, function (i, ele) {
          console.log(i)
          console.log(ele)
        })

        $.each({ name: "andy", id: 2, city: "wuhan" }, function (i, ele) {
          console.log(i)
          console.log(ele)
        })
      })


    })
  </script>
</body>

</html>